<template>
    <div id="app" class="row">
        <my-nav></my-nav>
        <my-main class="col-md-12"></my-main>
        <!--<div class="col-md-4">
            <section class="right">
                <my-type></my-type>
            </section>
        </div>-->
        <div class="toTop" @click="toTop">
            <a>返回顶部</a>
        </div>
    </div>
</template>

<script>
import './assets/bootstrap/dist/js/bootstrap.js'
import myMain from './components/Main'
import myNav from './components/Nav'
import myType from './components/Type'
export default {
    data() {
        return {
            isActive: false,

        }
    },
    name: 'app',
    components: {
        myMain,
        myNav,
        myType
    },
    methods: {
        toTop() {
            $("body").animate({
                scrollTop: 0
            }, 300);
        },

    },
    created() {
        this.$Notice.config({
            top: 80,
            duration: 3
        });
    }
}
</script>

<style>
@import './assets/bootstrap/dist/css/bootstrap.css';
@import './assets/fonts/fontawesome/css/font-awesome.css';
@media(min-width:798px) {
    #app {
        width: 70%;
    }
}

#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    margin: 0 auto;
    padding-top: 50px;
}

li {
    list-style: none;
    display: inline
}

a:link,
a:visited,
a:hover,
a:active {
    cursor: pointer;
    text-decoration: none
}

.left {
    padding: 20px;
}

.right {
    padding: 20px;
}

.toTop {
    width: 60px;
    height: 60px;
    position: fixed;
    right: 50px;
    bottom: 40px;
}
</style>